<template>
  <div id="line-chart">
    <div id="line-chart-view"></div>
  </div>
</template>

<script>
	export default {
    name: 'LineChart',
    data() {
      return {
        option: {},
        dataAxis: [],
        data: [],
        title: ''
      }
    },
    methods: {
      initOption() {
        this.option = {
          title:{
            text: this.title
          },
          xAxis:{
              data: this.dataAxis,
              type: 'category',
          },
          tooltip: {
            axisPointer: {          
                type: 'line'     
            },
            trigger: 'axis'
          },
          yAxis:{},
          axisTick: {
            show: true,
            alignWithLabel: true
          },
          axisLine: {
            show: true
          },
          series:[{
              type:'line',
              data: this.data,
              itemStyle: {
                normal: {
                  color: '#409EFF', //改变折线点的颜色
                  lineStyle: {
                    color: '#409EFF' //改变折线颜色
                  }
                }
              },
          }]
        }
      }
    },
    mounted() {
      let _this = this;
      this.data = this.$store.state.data;
      this.dataAxis = this.$store.state.dataAxis;
      this.title = this.$store.state.title;
      let myChart = this.$echarts.init(document.getElementById('line-chart-view'));
      this.initOption();
      myChart.setOption(this.option);
    }
	}
</script>

<style>
  #line-chart-view {
    width: 900;
    height: 700px;
  }
</style>
